<div class="p-8 overflow-auto">
  <div class="text-lg mb-4">
    {{ 'PAC.Project.ProjectOwner' | translate: {Default: 'Project Owner'} }}
  </div>

  <pac-user-profile-card class="flex w-52"
    [user]="project?.owner">
    <div *ngIf="isOwner" ngmButtonGroup>
      <button mat-stroked-button color="accent" displayDensity="cosy" (click)="transferOwner()">
        <div class="flex items-center whitespace-nowrap overflow-hidden text-ellipsis">
          <mat-icon fontSet="material-icons-outlined">local_shipping</mat-icon>
          {{ 'PAC.Project.TransferOwnership' | translate: { Default: 'Transfer Ownership' } }}
        </div>
      </button>
    </div>
  </pac-user-profile-card>

  <div class="text-lg my-4">
    {{ 'PAC.Project.ProjectMembers' | translate: {Default: 'Project Members'} }}
  </div>

  <div class="flex justify-between items-center mb-0">
    <pac-form-field-search appearance="fill" [formControl]="searchControl"></pac-form-field-search>

    <div ngmButtonGroup *ngIf="isOwner">
      <button mat-raised-button color="primary" displayDensity="cosy" (click)="openMemberSelect()">
        <div class="flex justify-center items-center">
          <mat-icon fontSet="material-icons-outlined">add</mat-icon>
          {{ 'PAC.KEY_WORDS.ADD' | translate: { Default: 'Add' } }}
        </div>
      </button>
    </div>
  </div>

  <ngm-table class="overflow-hidden rounded-lg border mt-2"
    paging
    [data]="members"
    [columns]="[
      {
        name: 'user',
        caption: 'PAC.KEY_WORDS.User' | translate: { Default: 'User' },
        cellTemplate: userTempl
      },
      {
        name: 'action',
        caption: 'PAC.KEY_WORDS.ACTION' | translate: { Default: 'Action' },
        cellTemplate: actionTempl
      }
    ]"
  ></ngm-table>

  <div class="text-lg my-4">
    {{ 'PAC.Project.Certifications' | translate: {Default: 'Certifications'} }}
  </div>
  <div class="flex justify-end items-center mb-0">
    <div ngmButtonGroup *ngIf="isOwner">
      <button mat-raised-button color="primary" displayDensity="cosy" (click)="openCertificationSelect()">
        <div class="flex justify-center items-center">
          <mat-icon fontSet="material-icons-outlined">add</mat-icon>
          {{ 'PAC.KEY_WORDS.ADD' | translate: { Default: 'Add' } }}
        </div>
      </button>
    </div>
  </div>
  <ngm-table class="overflow-hidden rounded-lg border mt-2"
    paging
    [data]="certifications"
    [columns]="[
      {
        name: 'name',
        caption: 'PAC.KEY_WORDS.Name' | translate: { Default: 'Name' }
      },
      {
        name: 'description',
        caption: 'PAC.KEY_WORDS.Description' | translate: { Default: 'Description' }
      },
      {
        name: 'action',
        caption: 'PAC.KEY_WORDS.ACTION' | translate: { Default: 'Action' },
        cellTemplate: certActionTempl
      }
    ]"
  ></ngm-table>

  @if (isOwner && project?.id) {
    <div class="text-xl my-4">
      {{ 'PAC.Project.Manage' | translate: {Default: 'Manage'} }}
    </div>
    
    <div class="pac-confirm-card pac-confirm-card__delete w-60 group">
        <div class="flex flex-col items-center p-4 gap-2">
            <h5 class="mb-1 text-base font-medium">
                {{ 'PAC.Project.DeleteProject' | translate: { Default: 'Delete project' } }}
            </h5>
    
            <div ngmButtonGroup class="pac-confirm-card__delete-actions h-0 overflow-hidden group-hover:h-10 transition-all duration-300">
                <button mat-stroked-button color="warn" displayDensity="cosy" (click)="deleteProject()">
                    <div class="flex items-center">
                        <mat-icon fontSet="material-icons-outlined">delete_outline</mat-icon>
                        {{ 'PAC.Project.ConfirmDelete' | translate: { Default: 'Confirm delete' } }}
                    </div>
                </button>
            </div>
        </div>
    </div>
  }
</div>


<ng-template #userTempl let-owner>
  <pac-user-profile-inline [user]="owner"></pac-user-profile-inline>
</ng-template>

<ng-template #actionTempl let-loading="loading" let-id="id">
  <button *ngIf="isOwner" mat-icon-button ngmAppearance="danger" displayDensity="cosy" class="text-gray-400"
    [disabled]="loading"
    (click)="removeMember(id)">
    <div class="flex justify-center items-center">
      <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
    </div>
  </button>
</ng-template>

<ng-template #certActionTempl let-loading="loading" let-id="id">
  <button *ngIf="isOwner" mat-icon-button ngmAppearance="danger" displayDensity="cosy" class="text-gray-400"
    [disabled]="loading"
    (click)="removeCertification(id)">
    <div class="flex justify-center items-center">
      <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
    </div>
  </button>
</ng-template>
